<template>
    <canvas ref="canvas" class="LinkCanvas" :width="width" :height="height"></canvas>
</template>
<script setup>
import { reactive, ref, watch } from "vue";

const props = defineProps(["width", "scale", "height"]);

const StartPoint = reactive({ x: 0, y: 0 });
const EndPoint = reactive({ x: 0, y: 0 });

const canvas = ref();

const RenderLink = function () {
    const ctx = canvas.value.getContext("2d");
    ctx.clearRect(0, 0, props.width, props.height);
    ctx.beginPath();
    ctx.strokeStyle = "#20ddd4";
    ctx.lineWidth = 1;
    ctx.fillStyle = "#cadd20";

    var angle = Math.atan2(EndPoint.y - StartPoint.y, EndPoint.x - StartPoint.x);
    var theta = angle * (180 / Math.PI);

    var x2 = StartPoint.x + Math.cos((Math.PI / 180) * (theta + 90)) * 2;
    var y2 = StartPoint.y + Math.sin((Math.PI / 180) * (theta + 90)) * 2;
    ctx.moveTo(x2, y2);
    var x3 = StartPoint.x + Math.cos((Math.PI / 180) * (theta - 90)) * 2;
    var y3 = StartPoint.y + Math.sin((Math.PI / 180) * (theta - 90)) * 2;
    ctx.lineTo(x3, y3);
    var Endx = EndPoint.x + Math.cos(angle) * -10;
    var Endy = EndPoint.y + Math.sin(angle) * -10;
    var x4 = Endx + Math.cos((Math.PI / 180) * (theta - 90)) * 2;
    var y4 = Endy + Math.sin((Math.PI / 180) * (theta - 90)) * 2;
    ctx.lineTo(x4, y4);
    var x5 = x4 + Math.cos((Math.PI / 180) * (theta - 90)) * 3;
    var y5 = y4 + Math.sin((Math.PI / 180) * (theta - 90)) * 3;
    ctx.lineTo(x5, y5);
    ctx.lineTo(EndPoint.x, EndPoint.y);
    var x6 = Endx + Math.cos((Math.PI / 180) * (theta + 90)) * 2;
    var y6 = Endy + Math.sin((Math.PI / 180) * (theta + 90)) * 2;
    var x7 = x6 + Math.cos((Math.PI / 180) * (theta + 90)) * 3;
    var y7 = y6 + Math.sin((Math.PI / 180) * (theta + 90)) * 3;
    ctx.lineTo(x7, y7);
    ctx.lineTo(x6, y6);
    ctx.lineTo(x2, y2);

    ctx.fill();

    ctx.stroke();
    ctx.closePath();
};

watch(
    StartPoint,
    (val) => {
        const ctx = canvas.value.getContext("2d");
        ctx.clearRect(0, 0, props.width, props.height);
    },
    { deep: true }
);

watch(
    EndPoint,
    () => {
        RenderLink();
    },
    { deep: true }
);

defineExpose({
    SetStartPoint(val) {
        StartPoint.x = val.x;
        StartPoint.y = val.y;
    },
    SetEndPoint(val) {
        EndPoint.x = val.x;
        EndPoint.y = val.y;
    },
    Clear() {
        const ctx = canvas.value.getContext("2d");
        ctx.clearRect(0, 0, props.width, props.height);
    },
});

// const MoveEvent = (event) => {
//     EndPoint.x = event.offsetX;
//     EndPoint.y = event.offsetY;
//     RenderLink();
// };
// const MoveEnd = (event) => {
//     EndPoint.x = event.offsetX;
//     EndPoint.y = event.offsetY;
//     document.removeEventListener("mousemove", MoveEvent);
//     document.removeEventListener("mouseup", MoveEnd);
// };

// onMounted(() => {
//     canvas.value.addEventListener("mousedown", (event) => {
//         StartPoint.x = event.offsetX;
//         StartPoint.y = event.offsetY;
//         document.addEventListener("mousemove", MoveEvent);
//         document.addEventListener("mouseup", MoveEnd);
//     });
// });
</script>
<style lang="less" scoped>
.LinkCanvas {
    position: absolute;
    width: 100%;
    height: 100%;
    color: #20ddd4;
    z-index: 9999;
    pointer-events: none;
}
</style>
